<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex-grow: 放大比例</title>
    <link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">
</head>

<body>
    <div>
        <p>
            弹性容器#container宽度是200px，但此时只有两个弹性元素，宽度分别是50px、100px。此时容器宽度是有剩余的。
        </p>
        <p>
            那么剩余的宽度该怎样分配？而flex-grow则决定了要不要分配以及各个分配多少。<br>
            （1）在flex布局中，容器剩余宽度默认是不进行分配的，也就是所有弹性元素的flex-grow都为0。<br>
            （2）通过指定flex-grow为大于零的值，实现容器剩余宽度的分配比例设置。<br>
            child1: flex-grow: 3; <br>
            child2: flex-grow: 2; <br>
            <strong>
                注意：放大的计算方法并没有与缩小一样，并没有将元素大小纳入考虑,
                仅仅按flex-grow声明的份数算出每个需分配多少，叠加到原来的尺寸上。
            </strong><br>
            元素放大计算方法：<br>
            <ol>
                <li>计算容器剩余宽度：50px</li>
                <li>计算按照flex-grow的分配，每一份需要分配多少: 50/(2+3) = 10</li>
                <li>
                    child1: 50 + 3*10 = 80px <br>
                    child2: 100 + 2*10 = 120px <br>
                </li>
            </ol>
            （3）无多余宽度时，flex-grow无效。<br>
        </p>
        <p></p>
    </div>
    <div>
        <p>默认是不进行分配</p>
        <div id="containter">
            <div>child1</div>
            <div>child2</div>
        </div>
    </div>
    <div>
        <p>指定分配比例</p>
        <div id="containter" class="flow-grow">
            <div>child1</div>
            <div>child2</div>
        </div>
    </div>

</body>

<style>
    #containter {
        display: flex;
        flex-wrap: nowrap;
        background-color: aqua;
        width: 200px;
        height: 200px;
    }

    #containter div {
        border: 0.3px solid #000;
    }

    #containter div:first-child {
        width: 50px;
        height: 50px;
        background-color: chocolate;
    }

    #containter div:nth-child(2) {
        width: 100px;
        height: 50px;
        background-color: chocolate;
    }

    #containter.flow-grow div:first-child {
        width: 50px;
        height: 50px;
        background-color: chocolate;
        flex-grow: 3;
    }

    #containter.flow-grow div:nth-child(2) {
        width: 100px;
        height: 50px;
        background-color: chocolate;
        flex-grow: 2;
    }
</style>

</html>